<template>
  <div v-if="!projectObj.name">
    <van-nav-bar title="项目查看" left-arrow @click-left="onClickLeft"/>
    <h2 style="text-align: center;">暂无项目，请先添加项目</h2>
  </div>
  <div v-else>
    <van-nav-bar title="项目查看" left-arrow @click-left="onClickLeft"/>
    <div class="van-cell van-field">
      <div class="van-cell__title van-field__label">
        <span>项目名称</span>
      </div>
      <div class="van-cell__value" @click="showSheet = true">
        <div class="van-field__body">
          <div class="van-field__control">{{projectObj.name}}</div>
          <div class="van-field__right-icon">
            <i class="van-icon van-icon-arrow-down"></i>
          </div>
        </div>
      </div>
    </div>
    <van-cell :border="false" title="业态" :value="projectObj.operation"/>
    <van-cell :border="false" title="地址" :value="projectObj.address"/>
    <van-row>
      <van-col class="my-col" span="8" v-for="(item,i) in level1list" :key="item.level1 + i">
        <!-- 保证性能，取消图片预览功能 -->
        <!-- <div class="col-click" @click="imgClick(item.list)"></div> -->
        <van-icon style="font-size: 24px;" name="photo-o"/>
        <span>{{`${item.level1}(${item.list.length})`}}</span>
      </van-col>
    </van-row>
    <div class="button-wrap">
      <van-button type="primary" @click="exportZip">一键导出</van-button>
    </div>
    <van-action-sheet v-model="showSheet" :actions="actions" @select="onSelect"/>
  </div>
</template>
<script>
import { getProjectList } from "@/utils/storage.js";
import { tranObjToZip } from "@/utils/file.js";
import myStorage from "@/utils/myStorage.js";

import vanNavBar from "vant/lib/nav-bar";
import "vant/lib/nav-bar/style";
import vanActionSheet from "vant/lib/actionsheet";
import "vant/lib/actionsheet/style";
import vanCell from "vant/lib/cell";
import "vant/lib/cell/style";
import vanButton from "vant/lib/button";
import "vant/lib/button/style";
import vanRow from "vant/lib/row";
import "vant/lib/row/style";
import vanCol from "vant/lib/col";
import "vant/lib/col/style";
import vanIcon from "vant/lib/icon";
import "vant/lib/icon/style";
import "vant/lib/field/style";
export default {
  components: {
    vanNavBar,
    vanActionSheet,
    vanCell,
    vanButton,
    vanRow,
    vanCol,
    vanIcon
  },
  data() {
    return {
      projectlist: [],
      projectIndex: 0,
      showSheet: false,
      actions: [],
      time: 0,
    };
  },
  computed: {
    projectObj() {
      return this.projectlist[this.projectIndex] || {};
    },
    level1list() {
      let arr = [...this.projectObj.level1list];
      arr = arr.map((a) => {
        let obj = { level1: a.level1 };
        let list = [];
        /* 获取一级分类下的照片描述 */
        let photolist1 = a.photolist || [];
        photolist1.forEach((p) => {
          let list1 = p.list || [];
          list = list.concat(list1);
          // 保证性能，取消预览图片功能
          // list = list.concat(list1.map((l1) => {
          //   return { src: myStorage.getItem(l1.item) };
          // }));
        });
        /* 获取一级分类下的二级分类 */
        let level2list = a.level2list || [];
        level2list.forEach((lv2) => {
          let photolist2 = lv2.photolist || [];
          photolist2.forEach((p) => {
            let list2 = p.list || [];
            list = list.concat(list2);
            // 保证性能，取消预览图片功能
            // list = list.concat(list2.map((l2) => {
            //   return { src: myStorage.getItem(l2.item) };
            // }));
          });
        })
        obj.list = list;
        return obj;
      });
      return arr;
    }
  },
  created() {
    this.projectlist = getProjectList();
    this.projectIndex = parseInt(this.$route.params.i) || 0;
    this.actions = [...this.projectlist];
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSelect(obj, index) {
      this.showSheet = false;
      this.projectIndex = index;
    },
    imgClick(list) {
      this.$imagePreview({
        images: list.map(t => t.src),
        onClose() {}
      });
    },
    exportZip() {
      // 第一次点击 或是 点击间隔时间超过30秒
      if (this.time === 0 || (new Date().getTime() - this.time) > 1 * 30 * 1000 ) {
        this.time = new Date().getTime();
        this.ZipAction();
      } else {
        this.$toast('请不要在30秒内重复点击');
      }
    },
    ZipAction() {
      tranObjToZip(this.projectObj, () => {
        this.time = 0;
        this.$toast.success('文件生成完毕，文件保存在 /Android/data/io.dcloud.H5044201D/apps/H5044201D/doc 目录中');
      });
    }
  }
};
</script>
<style lang="less" scoped>
.button-wrap {
  text-align: center;
  padding: 10px 0;
  .van-button {
    width: 90%;
    border-radius: 10px;
  }
}
.my-col {
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid #eee;
  position: relative;
  .col-click {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
  }
}
.van-cell__value {
  flex: 2;
}
</style>
